<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://unpkg.com/vue@next"></script>
</head>

<body>

    <!-- 
    setup函数是 Composition API
    vue2中在一个组件中会 有data methods computed等多个属性 当组件越来越大则会增加复杂度以及维护难度， setup 则是将这些内容全部合并
    执行时间在beforecreate与create之间
    两个参数 props context
    需要使用的值或函数，必须return出去
    setup中不能写this ， 因为是在create实例之前还未创建， 所以拿不到实例setup函数中， 不能调用外部的函数， 例如methods mounted 等
    methds 可以调用setup里面的函数，通过 this.$options.setup()
    默认定义的变量，页面引用后修改将不会自动重新渲染 需要借助 ref /reactive 
    -->
    <div id="root"></div>
    <template id='box'>
        <div>
            {{testVal}}
            <div @click=handClick()>{{content}}
            </div>
            <button @click='handClick2'>按钮</button>
        </div>
    </template>
</body>
<script>
    Vue.createApp({
        setup(props, context) {
            //this 是undefined
            let testVal = 'test';
            let onk = () => {
                testVal = 'bb'
                console.log(testVal)//将会改为bb 但是页面不会渲染
            }
            return {
                testVal,
                content: 'aa',
                handClick: () => {
                },
                handClick2: onk
            }
        },
        mounted() {
            // this.test()
            this.$options.setup().handClick() //调用setup中的函数
        },
        methods: {
            test() {
                console.log(this.$options)
            }
        },
        template: '#box'
    }).mount('#root')
</script>

</html>